<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>编辑管理员</title>
  <link href="../static/vendor/element-ui@2.15.9/lib/theme-chalk/index.css" rel="stylesheet" />
  <link href="../static/eladmin/css/eladmin.min.css" rel="stylesheet" />
</head>

<body>
  <div id="app" class="edit-page dark-theme" v-cloak>
    <el-form ref="form" :model="dataOfMain.data" size="mini" label-width="80px">
      <el-row>
        <el-col :span='12'>
          <el-form-item label="用户名">
            <el-input v-model="dataOfMain.data.user_name" placeholder="请输入用户名" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
          <el-form-item label="昵称">
            <el-input v-model="dataOfMain.data.nick_name" placeholder="请输入昵称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
          <el-form-item label="姓名">
            <el-input v-model="dataOfMain.data.contact_name" placeholder="请输入姓名" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
          <el-form-item label="分组名称">
            <el-select v-model="dataOfMain.data.group_name" placeholder="请选择">
              <el-option v-for="item in optionsOfGroupName" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
          <el-form-item label="密码">
            <el-input v-model="dataOfMain.data.password" placeholder="请输入密码" clearable show-password></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
          <el-form-item label="密码盐">
            <el-input v-model="dataOfMain.data.salt" placeholder="请输入密码盐" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
          <el-form-item label="头像">
            <el-input v-model="dataOfMain.data.avatar" placeholder="请输入头像" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
          <el-form-item label="电子邮箱">
            <el-input v-model="dataOfMain.data.email" placeholder="请输入电子邮箱" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
          <el-form-item label="手机号码">
            <el-input v-model="dataOfMain.data.mobile" placeholder="请输入手机号码" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
          <el-form-item label="性别">
            <el-input-number v-model="dataOfMain.data.gender" :min="1" :max="10" label="请输入性别"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
          <el-form-item label="状态">
            <el-radio-group v-model="dataOfMain.data.status">
              <el-radio :label="item.value" v-for="item of dataOfMain.status_data">{{item.text}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item class="form-footer">
        <el-button @click="window.parent.globalApp.closeFormDialog()">取消</el-button>
        <el-button type="primary" @click="onSubmitForm">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
  <script src="../static/vendor/vue@2.6.14/dist/vue.min.js"></script>
  <script src="../static/vendor/element-ui@2.15.9/lib/index.js"></script>
  <script src="../static/vendor/axios@0.27.2/dist/axios.min.js"></script>
  <script src="../static/vendor/mockjs@1.1.0/dist/mock.js?v=1.0.0"></script>
  <script src="../static/js/utils.min.js"></script>
  <script src="../static/mock/admin/api-route.js?v=1.0.0"></script>
  <script src="../static/mock/admin/auth-admins.js?v=1.0.0"></script>
  <script src="../static/eladmin/js/elcomponents.min.js"></script>

  <script>
    // 使用模拟数据
    useMockData();

    /**
     * 编辑管理员表
     */
    const App = {
      el: '#app',
      name: "AdminsEdit",
      data() {
        return {
          loadingState: {
            submit: false,
          },
          id: 0,
          title: "编辑",
          dataOfMain: {
            data: {},
            status_data: []
          },
          optionsOfGroupName: [],
        };
      },
      methods: {
        // 加载页面数据
        loadData() {
          console.log('[加载详情数据] 查询参数= ', { id: this.id });
          // 详情数据
          this.vuiAjax.get(this.apiRoute.authAdminsRead, { params: { id: this.id } })
            .then(msgInfo => {
              this.loadingState.submit = false;
              console.log("[加载详情数据] 返回结果= ", msgInfo);
              if (!msgInfo.success) {
                this.$message.error(msgInfo.message);
                return;
              }
              this.dataOfMain = msgInfo.data;
            })
            .catch(msgInfo => {
              this.$message.error(msgInfo.message);
            });

          // 加载下拉输入框数据
          this.vuiAjax.get(this.apiRoute.authGroupsIndex, { params: { _mode: 'dict' } }).then(msgInfo => {
            if (!msgInfo.success) {
              this.$message.error(msgInfo.message);
              return;
            }
            // this.optionsOfGroupName = msgInfo.data;
          }).catch(msgInfo => {
            this.$message.error(msgInfo.message);
          })
        },
        // 提交表单数据
        onSubmitForm() {
          console.log("[提交表单数据] 表单数据= ", (this.id > 0 ? '新增' : '更新'), this.dataOfMain.data);
          this.loadingState.submit = true;
          let ajaxPromise = this.id > 0 ?
            this.vuiAjax.put(this.apiRoute.authAdminsUpdate, { params: this.dataOfMain.data }) :
            this.vuiAjax.post(this.apiRoute.authAdminsSave, this.dataOfMain.data);
          ajaxPromise.then(msgInfo => {
            console.log("[提交表单数据] 返回结果= ", msgInfo);
            this.loadingState.submit = false;
            if (!msgInfo.success) {
              this.$message.error(msgInfo.message);
              return;
            }
            this.id = msgInfo.data;
          })
            .catch(msgInfo => {
              this.loadingState.submit = false;
              this.$message.error(msgInfo.message);
            });
          ajaxPromise = null
        },
      },
      mounted() {
        let params = EsUtils.getQueryString();
        this.id = params.id || 0;
        this.loadData();
      }
    };
    // 全局加载组件
    Vue.use(ElComponents);
    Vue.prototype.apiRoute = new ApiRoute();
    // 获取标准消息格式的 axios 实例
    Vue.prototype.vuiAjax = EsUtils.getStdAjax();
    // 创建应用实例
    var app = new Vue(App)
  </script>
</body>

</html>